<template>
  <div class="dashboard-editor-container">

    <el-row style="margin-bottom:10px;">
        <el-col :xs="12" :sm="12" :lg="6" class="card-panel-col">
          <el-date-picker
            v-model="daterangeOrderDate"
            size="small"
            style="width: 300px"
            value-format="yyyy-MM-dd"
            type="daterange"
            range-separator="-"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            @change="selDateCount"
          ></el-date-picker>
        </el-col>
    </el-row>    

    <el-row>
      <panel-group :params = "this.params" ref = "panelGroupRef"/>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:15px;">
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <bar-chart :params = "this.params"/>
        </div>
      </el-col>
      <el-col :xs="24" :sm="24" :lg="12">
        <div class="chart-wrapper">
          <span>待审合同</span>
          <span style="float:right;">
            <el-link href="/#/contract/contract" style="color:#1890ff">更多>></el-link>
          </span>
          <pendingContract />
        </div>
      </el-col>
      
    </el-row>

    <!-- 客户来源分析 -->
    <el-row>
      <div class="chart-wrapper">
        <customerSourceChart :params = "this.params"/>
      </div>
    </el-row>

    <!-- 客户行业分析 -->
    <el-row>
      <div class="chart-wrapper">
        <customerTradeChart :params = "this.params"/>
      </div>
    </el-row>

    
  </div>
</template>

<script>
import PanelGroup from './crm/index/PanelGroup'
import BarChart from './crm/index/saleBarChart'
import pendingContract from './crm/contract/pendingContract'
import customerSourceChart from './crm/index/customerSourceChart'
import customerTradeChart from './crm/index/customerTradeChart'


export default {
  name: 'Index',
  components: {
    PanelGroup,
    BarChart,
    pendingContract,
    customerSourceChart,
    customerTradeChart
  },
  data() {
    return {
      daterangeOrderDate: [],
      params: {startDate: '', endDate: ''}
    }
  },
  created() {
    this.selDateCount();
  },
  methods: {
    //时间修改后查询
    selDateCount(){
      if(null != this.daterangeOrderDate){
        this.params = {startDate: this.daterangeOrderDate[0], endDate: this.daterangeOrderDate[1]};
      }else{
        this.params = {startDate: '', endDate: ''};
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width:1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>